<template>
	<view class="cu-w-100 cu-position-fixed" :style="{
			opacity:getOpacity,
			height:height,
			zIndex:zIndex,
			borderRadius:borderRadius,
			backgroundImage: 
				backgroundImageType !== 'image' 
				? 
				linearGradient
				:
				getBgImageUrl
		}">
	</view>
</template>

<script>
	export default {
		name:"page-bg",
		props: {
			opacity: {type: String,default: "0.3"},
			/* 高度 */
			height:{type: String,default: "100vh"},
			/* 图层 */
			zIndex:{type: String,default: "-9"},
			 /* 圆角 */
			borderRadius:{type: String,default: undefined},
			/* 背景类型 
			image 	图片 
			非image 渐变色 （默认）*/
			backgroundImageType:{type: String,default: "image"},
			/* 图片base64 */
			backgroundImageUrl: {type: String,default: undefined},
			/* 渐变色 */
			linearGradient: {type: String,default: "linear-gradient(to top,rgba(64, 64, 111,0.65),rgba(64, 64, 111,0.25))"},
		},
		computed:{
			backgroundStyle(){
				let style = {};
				style.opacity = this.opacity
				style.height = this.height
				style.zIndex = this.zIndex
				style.borderRadius = this.borderRadius
				if(this.backgroundImageType === 'image') {
					style.background = this.backgroundImageUrl
				}
				else {
					style.backgroundImage = this.linearGradient
				}
				// 合并用户传递的背景色对象
				// Object.assign(style, this.indexBackground);
				return style;
			},
			getBgImageUrl(){
				this.$store.dispatch('$app/initBgOptions',{});
				return this.backgroundImageType === "image" && (this.backgroundImageUrl === undefined || this.backgroundImageUrl === '') ? this.$store.state.$app.bgOptions.url : this.backgroundImageUrl
			},
			getOpacity(){
				return this.opacity === undefined ? this.$store.state.$app.bgOptions.getOpacity : this.opacity
			}
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>